<!DOCTYPE html>
<html>
  <head>
    <title>Travel modes in directions</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="script-tags-for-development.js"></script>
    <style>
      html, body {width:100%; height: 100%; padding:0; margin: 0}
      body {padding: 5px}
      * { box-sizing: border-box; }
    </style>
  </head>
  <body ng-app="ngMap">
    <div style="width: 68%; float:left; height: 100%">

      <ng-map zoom="14" center="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman" style="height:90%" >
        <directions
          draggable="true"
          panel="directions-panel"
          travel-mode="DRIVING"
          origin="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman"
          destination="Pier St, Jackson Bay, West Coast, New Zeland">
        </directions>
      </ng-map>
      Directions path length:
        {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}
    </div>

    <div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px">
    </div>
  </body>
</html>
